<template>
    <div class="fun-grid-item">
        <div class="grid-img">
            <img :src="iconUrl">
        </div>
        <div class="grid-text">
            <span>{{text}}</span>
        </div>
    </div>
</template>

<script>

    import C1 from '../images/C1.png';
    import C2 from '../images/C2.png';
    import C3 from '../images/C3.png';
    import D1 from '../images/D1.png';
    import D2 from '../images/D2.png';
    import D3 from '../images/D3.png';
    import D4 from '../images/D4.png';
    import E1 from '../images/E1.png';
    import E2 from '../images/E2.png';
    import E3 from '../images/E3.png';
    import F1 from '../images/F1.png';
    import F2 from '../images/F2.png';
    import G1 from '../images/G1.png';
    import G2 from '../images/G2.png';
    import H1 from '../images/H1.png';
    import H2 from '../images/H2.png';

    export default {
        name: "fun-grid-item",
        props: {
            /**
             * 参数说明: type:{state....}
             * =========
             * H:{1开启外循环、2开启内循环}
             * G:{1关闭净化器、2开启净化器}
             * F:{1关闭新风机、2开启新风机}
             * E:{1开窗通风、2减少开窗、3关闭门窗}
             * D:{1适宜室外活动、2减少室外活动、3适宜留在室内、4转往安全室内}
             * C:{1无须戴口罩、2建议戴口罩、3必须戴口罩}
             */
            type: {
                type: String,
                default: ''
            },
            //TODO 根据上文确认状态-1、2、3...
            state: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                //默认
                iconUrl: '',
                text: '',
                iconObj: {
                    'C1': C1,
                    'C2': C2,
                    'C3': C3,
                    'D1': D1,
                    'D2': D2,
                    'D3': D3,
                    'D4': D4,
                    'E1': E1,
                    'E2': E2,
                    'E3': E3,
                    'F1': F1,
                    'F2': F2,
                    'G1': G1,
                    'G2': G2,
                    'H1': H1,
                    'H2': H2,
                },
                textObj: {
                    'C1': '无须戴口罩',
                    'C2': '建议戴口罩',
                    'C3': '必须戴口罩',
                    'D1': '适宜室外活动',
                    'D2': '减少室外活动',
                    'D3': '适宜留在室内',
                    'D4': '转往安全室内',
                    'E1': '开窗通风',
                    'E2': '减少开窗',
                    'E3': '关闭门窗',
                    'F1': '关闭新风机',
                    'F2': '开启新风机',
                    'G1': '关闭净化器',
                    'G2': '开启净化器',
                    'H1': '开启外循环',
                    'H2': '开启内循环',
                }
            };
        },
        mounted() {
            let that = this;
            let code = String(that.type + that.state);
            that.load(code);
        },
        components: {},
        methods: {
            load(code) {
                let that = this;
                that.iconUrl = that.iconObj[code]
                that.text = that.textObj[code]
            }
        },
    }
</script>
<style lang="css" scoped>
    .fun-grid-item {
        display: grid;
        position: relative;
        grid-template-rows: 3rem;
    }

    .grid-img {
        width: 100%;
        position: absolute;
        bottom: 1.3em;
    }

    .fun-grid-item img {
        width: 65%;
        height: auto;
    }

    .fun-grid-item span {
        font-size: 0.63rem;
        color: #FFF;
    }

    .grid-text {
        width: 100%;
        position: absolute;
        bottom: 0;
    }




</style>
